<template>
    <div class="project-management">
        <HomeHeader />
        <el-card class="main-card" style="margin-top: 50px;">
            <div class="header-area">
                <div class="title">
                    <i class="el-icon-s-management"></i>
                    项目管理
                </div>
                <div class="desc">集中管理项目模块、需求与进度，提升协作效率</div>
            </div>
            <el-tabs v-model="activeTab" class="main-tabs">
                <el-tab-pane label="模块管理" name="modules">
                    <ModuleManagement />
                </el-tab-pane>
                <el-tab-pane label="需求管理" name="requirements">
                    <RequirementManagement />
                </el-tab-pane>
                <el-tab-pane label="进度跟踪" name="progress">
                    <ProgressTracking />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import HomeHeader from '@/components/HomeHeader.vue'
import ModuleManagement from '@/components/project/ModuleManagement.vue'
import RequirementManagement from '@/components/project/RequirementManagement.vue'
import ProgressTracking from '@/components/project/ProgressTracking.vue'

export default {
    name: 'ProjectManagement',
    components: {
        HomeHeader,
        ModuleManagement,
        RequirementManagement,
        ProgressTracking
    },
    data() {
        return {
            activeTab: 'modules'
        }
    }
}
</script>

<style scoped>
.project-management {
    padding: 32px 0;
    background: #f5f7fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-card {
    width: 1200px;
    min-height: 700px;
    border-radius: 12px;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
    padding: 0 0 32px 0;
}

.header-area {
    padding: 32px 32px 0 32px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 0;
}

.title {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 12px;
}

.title i {
    font-size: 32px;
    color: #409EFF;
}

.desc {
    margin-top: 8px;
    color: #909399;
    font-size: 16px;
}

.main-tabs {
    padding: 24px 32px 0 32px;
}

:deep(.el-tabs__header) {
    margin-bottom: 24px;
}
</style> 